/* stylelint-disable no-descending-specificity */

.base {
  background-color: var(--theme-colors-base-2);
  display: flex;
  flex-basis: var(--theme-sizes-navigation-maxWidth);
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: visible;

  header {
    height: 140px;
    position: relative;
  }
  main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  section.launch {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0 0 var(--theme-sizes-layout-big) 0;
    width: var(--theme-sizes-navigation-maxWidth);
  }
  section.top {
    flex-grow: 1;
  }
  footer {
    display: flex;
    flex-direction: column;
  }
  .logo {
    height: 64.94px;
    left: 60px;
    position: absolute;
    top: 24px;
    width: 128px;
  }
  .logoIcon {
    background-image: url('~assets/logo-icon.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 40px;
    left: 32px;
    position: absolute;
    top: 0;
    width: 52px;
  }
  .logoLabel {
    background-image: url('~assets/logo-on-dark-label.svg');
    background-repeat: no-repeat;
    height: 13px;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 52px;
    width: 120px;
  }
  .version {
    color: var(--theme-colors-base-12);
    font-size: var(--theme-sizes-font-tiny);
    font-style: italic;
    height: 17px;
    position: absolute;
    top: 104px;
    width: 100%;
  }
  .versionLabel {
    align-items: center;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .launchBlock {
    align-items: center;
    display: flex;
    height: 32px;
    width: 190px;

    .launchButton {
      background-color: transparent;
      border-color: var(--theme-colors-monochrome-9);
      border-radius: var(--theme-sizes-border-radius);
      border-style: solid;
      border-width: var(--theme-sizes-border-width);
      color: var(--theme-colors-monochrome-17);
      flex-grow: 1;
      flex-shrink: 1;
      overflow: hidden;
      padding: 0 var(--theme-sizes-layout-big);
    }
    .launchIcon {
      align-items: center;
      background-color: transparent;
      border-color: var(--theme-colors-monochrome-9);
      border-radius: 0 var(--theme-sizes-border-radius) var(--theme-sizes-border-radius) 0;
      border-style: solid;
      border-width: var(--theme-sizes-border-width);
      color: var(--theme-colors-monochrome-17);
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      width: var(--theme-sizes-layout-giant);
    }
  }
  .launchBlock:hover {
    .launchButton,
    .launchIcon { border-color: var(--theme-colors-monochrome-17); }
  }
  .navItem {
    color: var(--theme-colors-monochrome-17);
    cursor: pointer;
    display: block;
    height: 48px;
    position: relative;
    width: var(--theme-sizes-navigation-maxWidth);

    [class*=Icon_base_] {
      left: var(--theme-sizes-layout-big);
      position: absolute;
      top: var(--theme-sizes-layout-large);
    }
    .label {
      font-size: var(--theme-sizes-font-small);
      height: var(--theme-sizes-layout-enormous);
      left: 56px;
      line-height: var(--theme-sizes-layout-enormous);
      overflow: hidden;
      position: absolute;
      top: var(--theme-sizes-layout-large);
      white-space: nowrap;
      width: auto;
    }
    .status {
      background-color: var(--theme-colors-action-normal);
      border-radius: var(--theme-sizes-layout-medium);
      bottom: var(--theme-sizes-layout-big);
      color: var(--theme-colors-monochrome-17);
      font-size: var(--theme-sizes-font-tiny);
      height: 0 var(--theme-sizes-layout-big);
      padding: 0 var(--theme-sizes-layout-small);
      position: absolute;
      right: var(--theme-sizes-layout-big);
      white-space: nowrap;
    }
  }
  .navItem.active {
    background-color: var(--theme-colors-base-0);
    cursor: default;
  }
  .navItem:hover {
    background-color: var(--theme-colors-base-3);
    color: var(--theme-colors-monochrome-17);
  }
  .user {
    align-items: center;
    background-color: var(--theme-colors-base-4);
    cursor: pointer;
    display: flex;
    padding: var(--theme-sizes-layout-big) var(--theme-sizes-layout-big);
    position: relative;
    width: var(--theme-sizes-navigation-maxWidth);
  }
  .user:hover {
    background-color: var(--theme-colors-base-3);
  }
  .user > [class*=Avatar_base_] {
    flex-shrink: 0;
  }
  .user > span {
    color: var(--theme-colors-monochrome-17);
    font-size: var(--theme-sizes-font-small);
    margin-left: var(--theme-sizes-layout-big);
    pointer-events: none;
  }
}
.collapsedAppear {
  flex-basis: 0;
  overflow: hidden;
}
.collapsedEnter,
.collapsedExitDone {
  flex-basis: var(--theme-sizes-navigation-maxWidth);

  header { height: 140px; }
  section.launch {
    padding: 0 0 var(--theme-sizes-layout-big) 0;
    width: var(--theme-sizes-navigation-maxWidth);
  }
  .logo {
    height: 64.94px;
    left: 60px;
    top: 24px;
    width: 128px;
  }
  .logoIcon {
    height: 40px;
    left: 32px;
    width: 52px;
  }
  .logoLabel {
    opacity: 1;
    width: 120px;
  }
  .version { top: 104px; }
  .navItem {
    width: var(--theme-sizes-navigation-maxWidth);

    .label { opacity: 1; }
    .status {
      right: var(--theme-sizes-layout-big);
      transform: translateX(0);
    }
  }
  .navItem.hasStatus {
    height: 48px;

    .status { bottom: var(--theme-sizes-layout-big); }
  }
  .user {
    width: var(--theme-sizes-navigation-maxWidth);

    span { opacity: 1; }
  }
}
.collapsedEnterActive {
  flex-basis: var(--theme-sizes-navigation-minWidth);
  transition: flex-basis var(--theme-animationCurve);

  header {
    height: 72px;
    transition: height var(--theme-animationCurve);
  }
  section.launch {
    padding: var(--theme-sizes-layout-medium) 0;
    transition: padding var(--theme-animationCurve), width var(--theme-animationCurve);
    width: var(--theme-sizes-navigation-minWidth);
  }
  .logo {
    height: 24px;
    left: 12px;
    top: 16px;
    transition:
      height var(--theme-animationCurve),
      left var(--theme-animationCurve),
      top var(--theme-animationCurve),
      width var(--theme-animationCurve);
    width: 32px;
  }
  .logoIcon {
    height: 24px;
    left: 0;
    transition:
      height var(--theme-animationCurve),
      left var(--theme-animationCurve),
      width var(--theme-animationCurve);
    width: 32px;
  }
  .logoLabel {
    opacity: 0;
    transition:
      opacity var(--theme-animationCurve),
      width var(--theme-animationCurve);
    width: 0;
  }
  .version {
    top: 44px;
    transition: top var(--theme-animationCurve),
  }
  .launchBlock {
    transition: width var(--theme-animationCurve);
    width: 32px;

    .launchButton {
      opacity: 0;
      padding: 0;
      transition:
        opacity var(--theme-animationCurve),
        padding var(--theme-animationCurve),
        width var(--theme-animationCurve);
      width: 0;
    }
    .launchIcon {
      border-radius: 100%;
      transition: border-radius var(--theme-animationCurve);
    }
  }
  .navItem {
    transition: height var(--theme-animationCurve), width var(--theme-animationCurve);
    width: var(--theme-sizes-navigation-minWidth);

    .label {
      opacity: 0;
      transition: opacity var(--theme-animationCurve);
    }
    .status {
      right: 50%;
      transform: translateX(50%);
      transition:
        bottom var(--theme-animationCurve),
        right var(--theme-animationCurve),
        transform var(--theme-animationCurve);
    }
  }
  .navItem.hasStatus {
    height: 72px;

    .status { bottom: var(--theme-sizes-layout-large); }
  }
  .user {
    transition: width var(--theme-animationCurve);
    width: var(--theme-sizes-navigation-minWidth);

    span {
      opacity: 0;
      transition: opacity var(--theme-animationCurve);
    }
  }
}
.collapsedExit,
.collapsedEnterDone {
  flex-basis: var(--theme-sizes-navigation-minWidth);

  header { height: 72px; }
  section.launch {
    padding: var(--theme-sizes-layout-medium) 0;
    width: var(--theme-sizes-navigation-minWidth);
  }
  .logo {
    height: 24px;
    left: 12px;
    top: 16px;
    width: 32px;
  }
  .logoIcon {
    height: 24px;
    left: 0;
    width: 32px;
  }
  .logoLabel {
    opacity: 0;
    width: 0;
  }
  .version { top: 44px; }
  .launchBlock {
    width: 32px;

    .launchButton {
      opacity: 0;
      padding: 0;
      width: 0;
    }
    .launchIcon { border-radius: 100%; }
  }
  .navItem {
    width: var(--theme-sizes-navigation-minWidth);

    .label { opacity: 0; }
    .status {
      right: 50%;
      transform: translateX(50%);
    }
  }
  .navItem.hasStatus {
    height: 72px;

    .status { bottom: var(--theme-sizes-layout-large); }
  }
  .user {
    width: var(--theme-sizes-navigation-minWidth);

    span { opacity: 0; }
  }
}
.collapsedExit {
  .navItem {
    .label { display: block; }
  }
}
.collapsedEnterDone {
  .navItem {
    .label { display: none; }
  }
}
.collapsedExitActive {
  flex-basis: var(--theme-sizes-navigation-maxWidth);
  transition: flex-basis var(--theme-animationCurve);

  header {
    height: 140px;
    transition: height var(--theme-animationCurve);
  }
  section.launch {
    padding: 0 0 var(--theme-sizes-layout-big) 0;
    transition: padding var(--theme-animationCurve), width var(--theme-animationCurve);
    width: var(--theme-sizes-navigation-maxWidth);
  }
  .logo {
    height: 64.94px;
    left: 60px;
    top: 24px;
    transition:
      height var(--theme-animationCurve),
      left var(--theme-animationCurve),
      top var(--theme-animationCurve),
      width var(--theme-animationCurve);
    width: 128px;
  }
  .logoIcon {
    height: 40px;
    left: 32px;
    transition:
      height var(--theme-animationCurve),
      left var(--theme-animationCurve),
      width var(--theme-animationCurve);
    width: 52px;
  }
  .logoLabel {
    opacity: 1;
    transition:
      opacity var(--theme-animationCurve),
      width var(--theme-animationCurve);
    width: 120px;
  }
  .version {
    top: 104px;
    transition: top var(--theme-animationCurve),
  }
  .launchBlock {
    transition: width var(--theme-animationCurve);
    width: 190px;

    .launchButton {
      opacity: 1;
      padding: 0 var(--theme-sizes-layout-big);
      transition:
        opacity var(--theme-animationCurve),
        padding var(--theme-animationCurve),
        width var(--theme-animationCurve);
      width: 100%;
    }
    .launchIcon {
      border-radius: 0 var(--theme-sizes-border-radius) var(--theme-sizes-border-radius) 0;
      transition: border-radius var(--theme-animationCurve);
    }
  }
  .navItem {
    transition: height var(--theme-animationCurve), width var(--theme-animationCurve);
    width: var(--theme-sizes-navigation-maxWidth);

    .label {
      opacity: 1;
      transition: opacity var(--theme-animationCurve);
    }
    .status {
      right: var(--theme-sizes-layout-big);
      transform: translateX(0);
      transition:
        bottom var(--theme-animationCurve),
        right var(--theme-animationCurve),
        transform var(--theme-animationCurve);
    }
  }
  .navItem.hasStatus {
    height: 48px;

    .status { bottom: var(--theme-sizes-layout-big); }
  }
  .user {
    transition: width var(--theme-animationCurve);
    width: var(--theme-sizes-navigation-maxWidth);

    span {
      opacity: 1;
      transition: opacity var(--theme-animationCurve);
    }
  }
}
